import { ConfigProvider, DatePicker } from 'antd';
import { Link, Route, Switch } from 'react-router-dom';
import zhCN from 'antd/lib/locale/zh_CN';
import { ReactElement } from 'react';
import Counter from './features/counter/Counter';
import Detail from './features/detail/Detail';
import './App.css';
import PrivateRoute from './app/PrivateRoute';
import Home from './features/home';
import Login from './features/login/Login';

function App():ReactElement {
  return (
    <ConfigProvider locale={zhCN}>
      <div className="App">
        {/* <Counter />
        <DatePicker />
        <Detail /> */}
        <nav className="navbar navbar-light">
          <ul className="nav navbar-nav">
            <li>
              <Link to="/counter">counter</Link>
            </li>
            <li>
              <Link to="/Home">Home</Link>
            </li>
            <li>
              <Link to="/datePicker">datePicker</Link>
            </li>
            <li>
              <Link to="/detail">detail</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/counter">
            <Counter />
          </Route>
          <Route path="/Home">
            <Home />
          </Route>
          <Route path="/datePicker">
            <DatePicker />
          </Route>
          <Route path="/login">
            <Login />
          </Route>
          <PrivateRoute path="/detail">
            <Detail />
          </PrivateRoute>
        </Switch>
      </div>
    </ConfigProvider>
  );
}

export default App;
